<template>
<el-container>
  <el-aside width="200px">
    <el-container>
    <el-header>
        <el-input
  placeholder="输入关键字进行过滤"
  v-model="filterText">
</el-input>
    </el-header>
    <el-main>
        <el-tree
  class="filter-tree"
  :data="data"
  :props="defaultProps"
  default-expand-all
  :filter-node-method="filterNode"
  @node-click="handleNodeClick"
  ref="tree">
</el-tree>
    </el-main>
  </el-container>
  </el-aside>
  <el-container>
    <el-header>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="物料编码">
    <el-input v-model="formInline.user" placeholder="请输入物料编码"></el-input>
  </el-form-item>
  <el-form-item label="物料名称">
    <el-input v-model="formInline.region" placeholder="请输入物料名称"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form-item>
</el-form>
    </el-header>
    <el-main>
        <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="物料编码"
      width="150">
      <template slot-scope="scope">{{ scope.row.MEncode }}</template>
    </el-table-column>
    <el-table-column
      prop="MName"
      label="物料名称"
      width="150">
    </el-table-column>
    <el-table-column
      prop="MModelType"
      label="规格型号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="MUnit"
      label="单位"
      width="120">
    </el-table-column>
    <el-table-column
      prop="Mproducts"
      label="物料/产品"
      width="120">
    </el-table-column>
    <el-table-column
      prop="MproductShuosu"
      label="所属分类"
      width="120">
    </el-table-column>
    <el-table-column
      prop="MYesNoEnable"
      label="是否启用"
      width="120">
      <template slot-scope="scope">
    <el-tag v-if="scope.row.MYesNoEnable===false" >是</el-tag>
    <el-tag v-if="scope.row.MYesNoEnable===true" type="danger">否</el-tag>
    </template>
    </el-table-column>
    <el-table-column
      prop="MSafetyStock"
      label="设置安全库存"
      width="120">
    <template slot-scope="scope">
     <el-tag v-if="scope.row.MSafetyStock=false">是</el-tag>
    <el-tag v-if="scope.row.MSafetyStock=true" type="danger">否</el-tag>
    </template>
    </el-table-column>
    <el-table-column
      prop="CreateDate"
      label="创建时间"
      width="200">
      <template slot-scope="scope">{{ scope.row.CreateDate }}</template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
    </el-main>
    <el-footer>
        <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.pageindex"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="page.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.TotalCount">
    </el-pagination>
    </el-footer>
  </el-container>
</el-container>
</template>

<script>
  export default {
    data() {
      return {
        filterText: '',
        data: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        tableData:[],
        multipleSelection: [],
        formInline: {
          user: '',
          region: '',
          pnamevalue:"",
        },
        page:{
            PageCount:0,
            TotalCount:0,
            pageindex:1,
            pagesize:2,
        }
      };
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    methods: {
        handleNodeClick(data) {
        console.log(data);
        this.formInline.pnamevalue = data.label;
        this.XsShow();
      },
      onSubmit() {
       this.XsShow();
      },
        filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      XLKShow(){
        this.axios.get("http://localhost:5255/api/Material/XLKProducts?PId=0").then(res=>{
      this.data = res.data.Data;
      })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleClick(row) {
        console.log(row);
      },
      XsShow(){
        this.axios.get("http://localhost:5255/api/Material/GetMaterial?pageindex="+this.page.pageindex
        +"&pagesize="+this.page.pagesize
        +"&mEncode="+this.formInline.user
        +"&mName="+this.formInline.region
        +"&pName="+this.formInline.pnamevalue).then(res=>{
            this.tableData = res.data.Data.Data;
            this.page.PageCount = res.data.Data.PageCount;
            this.page.TotalCount = res.data.Data.TotalCount;
        })
      }
    },
    created(){
        this.XLKShow();
        this.XsShow();
    }
  };
</script>